@import '~@/assets/less/common.less';

.room {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  
  .operation-button {
    width: 90px;
    height: 40px;
    font-size: 16px;
  }

  .figure {
    flex: 1;
    text-align: center;
    .avatar {
      width: 60px;
      height: 80px;
    }
    .message {
      width: 100%;
    }
    .message.cur-player {
      color: red;
      font-weight: bold;
      background-color: yellow;
    }
  }

  .p1, .p2 {
    .message {
      width: 70%;
      margin: 0 15%;
    }
  }

  .top {
    flex: 1.5;
    border-bottom: 1px solid grey;
    display: flex;
    align-items: center;
    padding: 0 10px;
  }

  .middle {
    flex: 5.5;
    width: 100%;
    height: 100%;
    display: flex;
    padding-top: 20px;
    .p1 {
      flex: 1;
      display: flex;
      padding: 0 10px;
      .card {
        padding-top: 30px;
        
        .poker {
          width: 30px;
        }
        .count {
          text-align: center;
          font-size: 20px;
          color: orangered;
        }
      }
    }
    .show {
      position: relative;
      flex: 3;
      width: 100%;
      border: 1px solid grey;
      .ready, .call-landlord, .loot-landlord, .play-card {
        width: 100%;
        position: absolute;
        bottom: 10px;
        text-align: center;
        button {
          margin: 0 10px;
        }
      }

      .card-box {
        display: flex;
        height: 100%;
        .card {
          width: 46px;
          height: 100%;
          &:not(:first-child) {
            margin-left: -30px;
          }
          .poker-card {
            width: 100%;
            height: 100%;
          }
        }
      }

      .me-cards {
        position: absolute;
        bottom: 10px;
        width: auto;
        height: 60px;
        left: 50%;
        transform: translate(-50%);
      }

      .p1-cards {
        position: absolute;
        left: 10px;
        top: 30px;
        height: 60px;
        display: flex;
        justify-content: center;
      }

      .p2-cards {
        position: absolute;
        right: 10px;
        top: 30px;;
        height: 60px;
        display: flex;
        justify-content: center;
      }

      .me-state {
        position: absolute;
        left: 0;
        bottom: 10px;
        width: 100%;
        text-align: center;
        span {
          font-size: 26px;
          text-shadow: #FA742B 1px 0 10px;
        }
      }

      .p1-state {
        position: absolute;
        top: 30px;
        left: 10px;
        text-align: center;
        span {
          font-size: 26px;
          text-shadow: #FA742B 1px 0 10px;
        }
      }

      .p2-state {
        position: absolute;
        top: 30px;
        right: 10px;
        text-align: center;
        span {
          font-size: 26px;
          text-shadow: #FA742B 1px 0 10px;
        }
      }
    }
    .p2 {
      flex: 1;
      display: flex;
      padding: 0 10px;
      .card {
        padding-top: 30px;
        text-align: right;
        .poker {
          width: 30px;
        }
        .count {
          text-align: center;
          font-size: 20px;
          color: orangered;
        }
      }
    }
  }

  .bottom {
    display: flex;
    flex: 4;
    padding: 20px;

    .figure {
      width: 10%;
      margin-right: 0;
    }

    .my-card {
      position: relative;
      width: 90%;
      height: 100%;
      .not-start {
        display: flex;
        height: 100%;
        justify-content: center;
        align-items: center;
      }
      .cards {
        position: absolute;
        left: 50%;
        transform: translate(-50%);
        height: 100%;
        .card-box {
          height: 100%;
          display: flex;
          width: auto;
          .card {
            position: relative;
            width: 86px;
            height: 100%;
    
            &:not(:first-child) {
              margin-left: -60px;
            }
    
            .poker-card {
              position: absolute;
              top: 0;
              width: 100%;
              height: 100%;
            }
          }
          .active {
            top: -10px;
          }
        }
      }
    }
  }
}